<template>
  <div>
    <!--<el-date-picker
      v-model="dateArray"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd HH:mm:ss"
      @change="dateChange">
    </el-date-picker>
    <el-button @click="showTrackFun()" type="primary">获取车辆轨迹</el-button>
    <hr/>-->
    <div class="amap-page-container">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="my-vehicle-amap" :amap-manager="amapManager" :events="events">
        <el-amap-marker v-if="mark.position.length>0" :position="mark.position">
          <!--<div :class="`marker-vehicle ${mark.data.loadStatus==1?'online':'offline'}`" :style="`transform: rotate(${mark.data.direction}deg);`">
            <div class="marker-vehicle-icon" :style="`transform: rotate(${-mark.data.direction}deg);`"></div>
          </div>-->
        </el-amap-marker>
        <template v-if="showTrack">
          <el-amap-bezier-curve
            v-for="line in lines"
            :key="line.id"
            :events="line.events"
            :path="line.path"
            :stroke-color="line.strokeColor"
            :stroke-style="line.strokeStyle"
            :stroke-opacity="line.strokeOpacity"
          ></el-amap-bezier-curve>
        </template>
      </el-amap>
    </div>
  </div>
</template>
<script>
  import Vue from "vue";
  import {Script} from "vm";
  import {vHisTrack, vehicleMap} from "@/api/vehiclemap";
  import {AMapManager} from "vue-amap";
  import "@/assets/vehicle_map/icon.css";

  const amapManager = new AMapManager();

  export default {
    data() {
      return {
        amapManager:amapManager,
        events: {
          init(o) {

          }
        },
        dateArray:["",""],
        vivdata: {
          vehicleCode: "595d6d91ca694b58a9fd23e04df0b494",
          startTime: "",
          endTime: "",
          locationSource: 0
        },
        showTrack:false,
        zoom: 12,
        center: [116.380298, 35.907771],
        mark:{position:[],loadStatus:0,direction:0},
        lines: [
          {
            path: [
              [116.380298, 35.907771]
            ],
            strokeDasharray: [10, 10],
            strokeColor: "#3366FF", //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 6, //线宽
            strokeStyle: "solid", //线样式
            events: {
              click: () => {
                alert("click");
              }
            }
          }
        ]
      };
    },
    created() {
    },
    methods: {
      trajectory(code) {
        this.vivdata.vehicleCode = code;
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        vehicleMap(this.vivdata.vehicleCode).then(response => {
          if(response.data){
            let item = response.data[0];
            if(item.longitude){
              this.mark.position=[Number(item.longitude), Number(item.latitude)];
              this.mark.loadStatus = item.loadStatus?item.loadStatus:0;
              this.mark.direction = item.direction?item.direction:0;
              this.center = this.mark.position;
            }else{
              this.mark={position:[],loadStatus:0,direction:0},
              this.$message({ message: '未查询到车辆位置信息！', type: 'error' });
            }
          }
          this.showTrack = true;
          loading.close();
        }).catch(() => {
          loading.close();
        });
      },showTrackFun(){
        if(this.vivdata.startTime&&this.vivdata.endTime){
          vHisTrack(this.vivdata).then(response => {
            let trackPath = [];
            let list = response.data;
            if(list&&list.length>0){
              this.center = [Number(list[0].longitude), Number(list[0].latitude)];
              list.forEach((item, index) => {
                trackPath.push([item.longitude, item.latitude]);
              });
              this.lines[0].path = trackPath;
              this.showTrack = true;
            }else{
              this.$message({ message: '该时间范围内未查询到轨迹！', type: 'error' });
            }
          });
        }else{
          this.$message({ message: '请选择时间范围！', type: 'error' });
        }
      },dateChange(arr){
        let start = new Date(arr[0]);
        let end = new Date(arr[1]);
        if(end-start>86400000){
          this.$message({ message: '所选择时间范围不能大于一天！', type: 'error' });
          this.dateArray=['',''];
        }else{
          this.vivdata.startTime = arr[0];
          this.vivdata.endTime = arr[1];
        }
      }
    }
  };
</script>
<style scoped>
  .amap-page-container {
    height: 800px;
  }
</style>
